<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="js/threejs/three.js" type="text/javascript"></script>
        
    </head>
    <body>
    
     <script  type="text/javascript" >
        var scene,camera,render;
        var loader = new THREE.FontLoader();
        //导入字体，设定字体，这里的话，你们找对自己的字体路径，可能和我的不一样的！！下载的three.js包里面examples/fonts里面有字体
        loader.load('fonts/helvetiker_bold.typeface.json',function(font){
            init(font);
            animate();
        });
 
        function init(font){
            // 老三样 场景scene，相机camera，渲染器render
             scene=new THREE.Scene();
            // 相机
            camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);
            camera.position.set(50,50,500);
          
            // 渲染器
            renderer=new THREE.WebGLRenderer();
 
            //背景颜色修改一下
            renderer.setClearColor( 0xf0f0f0 );
            renderer.setSize(window.innerWidth,window.innerHeight);
 
            //显示在窗体
            document.body.appendChild(renderer.domElement);       
 
            // 文字
            var text = "Tian";
            var g = new THREE.TextGeometry(text,{
                // 设定文字字体，
                font:font,
                //尺寸
                size:40,
                //厚度
                height:50,
            });
            //计算边界，暂时不用管
            g.computeBoundingBox();
            //3D文字材质
            var m = new THREE.MeshBasicMaterial({color:0xff0000});
            var mesh = new THREE.Mesh(g,m);
          
            // 加入到场景中
            scene.add(mesh);               
        }
 
        function animate(){
            requestAnimationFrame( animate );
             // 渲染
            renderer.render(scene,camera);   
        }
    </script>
    </body>
</html>